<template>
  <view class="my-center">
    <!-- 个人资料区域 -->
    <view class="profile-section">
      <view class="user-info">
        <view class="avatar-container">
          <image class="avatar" :src="imgurl + myInfo.merAvatar" mode="aspectFill"></image>
        </view>
        <view class="user-details">
          <view class="username">{{ myInfo.merName || '未设置名称' }}</view>
          <view class="user-address">{{ myInfo.merAddress || '未设置地址' }}</view>
        </view>
      </view>

      <!-- 余额卡片 -->
      <view class="balance-card" @click="navigateToBalance">
        <view class="balance-content">
          <view class="balance-label">账户余额（元）</view>
          <view class="balance-amount">¥ {{ myInfo.integraSum || '0.00' }}</view>
        </view>
        <view class="arrow-icon">
          <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 功能菜单区域 -->
    <view class="menu-section">
      我的服务

      <view class="menu-grid">
        <view class="menu-item" @click="navigateToEdit">
          <view class="menu-icon bg-blue">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/门店设置_20250521091559A091.png"></image>
          </view>
          <text class="menu-text">门店设置</text>
        </view>

        <view class="menu-item" @click="navigateToStoreSetup">
          <view class="menu-icon bg-green">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/扫码_20250521091646A092.png"></image>
          </view>
          <text class="menu-text">线下核销</text>
        </view>

        <view class="menu-item" @click="navigateToRedemptList">
          <view class="menu-icon bg-purple">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/核销记录_20250521091701A093.png"></image>
          </view>
          <text class="menu-text">核销记录</text>
        </view>

        <view class="menu-item" @click="navigateToRefundList">
          <view class="menu-icon bg-red">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/退款记录_20250521091718A094.png"></image>
          </view>
          <text class="menu-text">退款记录</text>
        </view>

        <view class="menu-item" @click="navigateToQrcode">
          <view class="menu-icon bg-orange">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/邀请二维码_20250521091730A095.png"></image>
          </view>
          <text class="menu-text">邀请二维码</text>
        </view>

        <view class="menu-item" @click="navigateToBalance">
          <view class="menu-icon bg-cyan">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/邀请记录_20250521091745A096.png"></image>
          </view>
          <text class="menu-text">返利记录</text>
        </view>

        <!--      <view class="menu-item" @click="navigateToActive" v-if="myInfo.isVendor == 1">
          <view class="menu-icon bg-cyan">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/邀请记录_20250521091745A096.png"></image>
          </view>
          <text class="menu-text">供应商活动</text>
        </view> -->
        <view class="menu-item" @click="navigateToXianxia">
          <view class="menu-icon bg-cyan">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/邀请记录_20250521091745A096.png"></image>
          </view>
          <text class="menu-text">线下消费配置</text>
        </view>
        <view class="menu-item" @click="navigateToCoupon">
          <view class="menu-icon bg-green">
            <image class="icon-img" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/商户二维码管理_20250521091859A100.png"></image>
          </view>
          <text class="menu-text">优惠券管理</text>
        </view>

        <!-- <view class="item" @click="handleQRcode">
            <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/二维码备份_20250521091844A099.png">
            </image>
            <text class="item-title">消费二维码</text>
          </view>

          <view class="item" @click="handleQRcodeStore">
            <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/商户二维码管理_20250521091859A100.png">
            </image>
            <text class="item-title">商户二维码</text>
          </view> -->
        <!-- <view class="item" @click="navigateToInviteRecord">
            <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/21/邀请记录_20250521091745A096.png">
            </image>
            <text class="item-title">邀请记录</text>
          </view> -->
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>

    <!-- 退出确认弹窗 -->
    <uni-popup ref="logoutPopup" type="dialog">
      <uni-popup-dialog type="warn" title="确认退出" content="确定要退出当前账号吗？" @confirm="confirmLogout" />
    </uni-popup>
  </view>
</template>

<script>
import { getUserInfo } from '../../utils/merorder/mer';
import { IMG_URL } from '../../config/index.js';

export default {
  data() {
    return {
      token: '',
      myInfo: {},
      imgurl: IMG_URL
    };
  },
  onShow() {
    this.token = uni.getStorageSync('token');
    getUserInfo(uni.getStorageSync('merId')).then((res) => {
      this.myInfo = res.data;
      // 模拟余额数据（实际应从接口获取）
      this.$set(this.myInfo, 'balance', '1286.50');
    });
  },
  methods: {
    // 处理退出登录
    handleLogout() {
      this.$refs.logoutPopup.open();
    },

    // 确认退出登录
    confirmLogout() {
      // 清除登录状态
      uni.removeStorageSync('userInfo');
      uni.clearStorage();
      uni.reLaunch({
        url: '/pages_doctor/phoneLogin/index'
      });
    },

    // 导航到余额页面
    navigateToBalance() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/user_money'
      });
    },
    // 导航到供应商活动页面
    navigateToActive() {
      uni.navigateTo({
        url: '/pages_sh/hdIndexGys/index'
      });
    },
    /* 导航到线下配置界面 */
    navigateToXianxia() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/xianXia'
      });
    },
    // 导航到编辑页面
    navigateToEdit() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/myCard'
      });
    },
    /* 导航到优惠券管理界面 */
    navigateToCoupon() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/couponManage'
      });
    },
    //导航到线下核销界面
    navigateToStoreSetup() {
      /** 核销码核销 */
      wx.scanCode({
        success(res) {
          var ticketCode = res.result.split('=')[1];
          uni.navigateTo({
            url: '/pages_sh/orderCode/redempt?ticketCode=' + ticketCode
          });
        },
        fail(err) {
          console.error('扫码失败：', err);
        }
      });
    },

    //导航到核销记录界面
    navigateToRedemptList() {
      uni.navigateTo({
        url: '/pages_sh/orderCode/redempt_list'
      });
    },

    //导航到退款记录界面
    navigateToRefundList() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/refund/index'
      });
    },

    //导航到二维码界面
    navigateToQrcode() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/code'
      });
    },

    /* 返利记录 */
    navigatToRebateRecord() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/rebateRecord'
      });
    },
    /* 商户二维码 */
    handleQRcodeStore() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/merCode'
      });
    },
    /* 线下消费二维码 */
    handleQRcode() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/payCode'
      });
    },
    /* 邀请记录 */
    navigateToInviteRecord() {
      uni.navigateTo({
        url: '/pages_sh/myCenter/codeInvite'
      });
    }
  }
};
</script>

<style lang="scss">
.my-center {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
  background: linear-gradient(0deg, #f8f9fa 60%, #bae7ff 80%);
  padding-top: 80px;
}

.profile-section {
  border-radius: 20rpx;
  padding: 40rpx 10rpx;
  margin-bottom: 20rpx;
  /*   box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1); */
  color: #000000;
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .avatar-container {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      overflow: hidden;
      margin-right: 30rpx;

      .avatar {
        width: 100%;
        height: 100%;
      }
    }

    .user-details {
      flex: 1;

      .username {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
      }

      .user-address {
        font-size: 26rpx;
        opacity: 0.9;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }

  .balance-card {
    background-image: url(https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/08/20/bgbg2_20250820150013A002.png);
    border-radius: 10rpx;
    background-size: 100% 100%;
    border-radius: 15rpx;
    padding: 25rpx;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10rpx);
    border: 1rpx solid rgba(255, 255, 255, 0.9);

    .balance-content {
      flex: 1;

      .balance-label {
        font-size: 26rpx;
        opacity: 0.9;
        margin-bottom: 10rpx;
      }

      .balance-amount {
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .arrow-icon {
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.menu-section {
  /*  background: rgba(255, 255, 255, 0.2); */
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  /* box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05); */
  margin-bottom: 20rpx;

  .menu-grid {
    display: flex;
    flex-wrap: wrap;

    .menu-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 0;

      .menu-icon {
        width: 90rpx;
        height: 90rpx;
        border-radius: 18rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rpx;

        .icon-img {
          width: 45rpx;
          height: 45rpx;
        }
      }

      .menu-text {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}

// 背景色类
.bg-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-green {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.bg-purple {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.bg-red {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
}

.bg-orange {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.bg-cyan {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.logout-section {
  padding: 0 20rpx;

  .logout-btn {
    background: #fff;
    color: #ff4d4f;
    border: 1rpx solid #ff4d4f;
    border-radius: 15rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
  }
}
</style>
